<template>
    <section class="recommend-list-main">
      <van-tabs v-model="active">
        <van-tab title="商品">
          <pull-up-reload
            v-if="productData.length > 0"
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState">
            <Product showOriginalPrice="showOriginalPrice" :productData="productData"></Product>
          </pull-up-reload>
          <!--无数据时-->
          <div class="none-p pa text-c" v-if="productData.length <= 0">
            <img src="../../assets/img/icon_remmoned_none.png" alt="无收藏">
            <p>
              暂无收藏商品
            </p>
            <p>喜欢的商品就要收藏起来哦</p>
            <p class="btn pr">
              <span class="inline-block pa color7E82F6">去逛逛</span>
            </p>
          </div>
          <!--无数据时-->
        </van-tab>
        <van-tab title="咨询">
          <pull-up-reload
            v-if="newData.length > 0"
            :on-infinite-load="onInfiniteLoad"
            :parent-pull-up-state="infiniteLoadData.pullUpState"
            style="margin-bottom: 50px;">

            <RecommendList :newData="newData"></RecommendList>
          </pull-up-reload>
          <!--无数据时-->
          <div class="none-p pa text-c" v-if="newData.length <= 0">
            <img src="../../assets/img/icon_remmoned_none.png" alt="无收藏">
            <p>
              暂无收藏商品
            </p>
            <p>喜欢的文章就要收藏起来哦</p>
            <p class="btn pr" @click="toJupmPage('recommoned')">
              <span class="inline-block pa color7E82F6">去逛逛</span>
            </p>
          </div>
          <!--无数据时-->
        </van-tab>
      </van-tabs>
      <Loading :show="isLoading"></Loading>
    </section>
</template>

<script type="text/ecmascript-6">
  import Product from '../../components/ProductList.vue'
  import Loading from '../../components/Loading.vue'
  import PullUpReload from '../../components/PullUpReload.vue'
  import RecommendList from '../../components/RecommendList.vue'

  import product1 from '../../assets/img/product1.png';
  export default {
    components:{
      Product,Loading,PullUpReload,RecommendList
    },
    data() {
      return {
        active:0,
        isLoading:false,
        productData:[
//          {
//            id:1,
//            src:product1,
//            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
//            model:'SF-608 腰椎治疗仪',
//            type:1,
//            typeText:'产品上新',
//            price:'268.00',
//            sellNum:'2654'
//          },
        ],  //产品数据

        newData:[
//          {
//            type:1,
//            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
//            src:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//            time:'北京青年报 20分钟前'
//          },
//          {
//            type:2,
//            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
//            src:'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//            time:'北京青年报 20分钟前'
//          },
//          {
//            type:3,
//            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
//            src:[
//              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//            ],
//            time:'北京青年报 20分钟前'
//          },
//          {
//            type:3,
//            title:'索弗按摩椅资讯标题文案资讯索弗按摩椅资讯标题文案资讯',
//            src:[
//              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//              'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091',
//            ],
//            time:'北京青年报 20分钟前'
//          },
        ],//

        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    methods: {
      toJupmPage(val){
        let path = '';
          path = val == 'recommend' ? '/index/web/recommend' : '/index';
        this.$router.push({
          path:path
        })
      },
      // 上拉一次加载更多的数据
      getPullUpMoreData () {
        this.showPullUpListLength = this.infiniteLoadData.pullUpList.length;
        if (this.infiniteLoadData.pullUpList.length + this.infiniteLoadData.everyLoadingNum > this.productData.length) {
          for (let i = 0; i < this.productData.length - this.showPullUpListLength; i++) {
            this.infiniteLoadData.pullUpList.push(this.productData[i + this.showPullUpListLength])
          }
        } else {
          for (let i = 0; i < this.infiniteLoadData.everyLoadingNum; i++) {
            this.infiniteLoadData.pullUpList.push(this.productData[i + this.showPullUpListLength])
          }
        }
        if (this.productData.length === this.infiniteLoadData.pullUpList.length) {
          this.infiniteLoadData.pullUpState = 3
        } else {
          this.infiniteLoadData.pullUpState = 0
        }
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      },
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/recommendList';
</style>
